<template>
    <view class="page" :style="{'--color': color}">
        <status-bar title='预约记录'></status-bar>
        <view class="padding40 text-center" v-if="detail.state == 0">
            <view class="size40 m-bot20">待支付</view>
            <view class="size28 thmeColor" v-if="detail.endTime > 0">请在<count-down :time="detail.endTime" fontSize="28" :txtColor="color" />内完成支付</view>
        </view>
        <view class="padding30 text-center" v-if="detail.state > 0 && detail.state < 6">
            <text class="iconfont icon-xiaolian size100 success-color"></text>
            <view class="size36 success-color m-top10 m-bot10">预约成功</view>
            <view class="size28 color_b7 m-bot30">请向工作人员出示预约码，如有疑问联系商家</view>
            <view class="size32 color_66 m-bot10" :class="{'line-through': detail.state == 4 || detail.state == 5}">预约码：{{ codeInfo.code }}</view>
            <view class="code_img p-re">
                <image :src="$imgUrls(codeInfo.url)" mode="aspectFit"></image>
                <view class="overlay wh p-ab" v-if="detail.state == 4 || detail.state == 5"></view>
            </view>
        </view>
        <view class="padding30 text-center" v-if="['6','96','97','98'].includes(detail.state)">
            <text class="iconfont icon-cry size100 color_66"></text>
            <view class="size36 m-top10 m-bot10" v-if="detail.state == 6">退款中</view>
            <view class="size36 m-top10 m-bot10" v-if="detail.state == 96">退款成功</view>
            <view class="size36 m-top10 m-bot10" v-else>已取消</view>
            <view class="size28 color_b7">您的预约已取消，如有疑问联系商家</view>
        </view>
        <view class="card padding40 d-flex a-center" @click="openMap">
            <view class="flex-1 p-right40">
                <view class="size30 bold m-bot20">{{ detail.shopName }}</view>
                <view class="h6">{{ detail.shopAdress }}</view>
            </view>
            <text class="iconfont icon-dingwei size40 thmeColor"></text>
        </view>
        <view class="card padding40-30 d-flex a-center" @click="showPopup = true" v-if="detail.service_info">
            <image class="avatar" :src="$imgUrls(detail.service_info.headimg)" mode="aspectFill"></image>
            <view class="flex-1 p-left10 p-right10">
                <view class="size30 bold m-bot6">{{ detail.service_info.title }}</view>
                <view class="h6 color_99">{{ detail.service_info.info }}</view>
            </view>
            <view class="add flexac size32 white">{{ detail.service_info.button1 }}</view>
        </view>
        <view class="card p-top12 p-bot12">
            <view class="item">
                <view class="label">预约项目</view>
                <view class="value">{{ detail.goods_name }}</view>
            </view>
            <view class="item">
                <view class="label">预约时间</view>
                <view class="value">{{ detail.subscribe_date }}</view>
            </view>
            <view class="item">
                <view class="label">手机号码</view>
                <view class="value">{{ detail.utel }}</view>
            </view>
            <view class="item">
                <view class="label">姓名</view>
                <view class="value">{{ detail.uname }}</view>
            </view>
            <view class="item">
                <view class="label">留言备注</view>
                <view class="value">{{ detail.remarks || '无' }}</view>
            </view>
        </view>
        <view class="card p-top12 p-bot12">
            <view class="item" v-if="detail.dis_money > 0">
				<view class="label">优惠券</view>
				<view class="value">-￥{{ detail.dis_money }}（{{ detail.dis_title }}）</view>
			</view>
            <view class="item" v-if="detail.fen_to_money > 0">
				<view class="label">积分抵扣</view>
				<view class="value">-￥{{ detail.fen_to_money }}（{{ detail.used_fen }}分）</view>
			</view>
            <view class="item">
				<view class="label">实付款{{ detail.used_t_wallet > 0 ? '(实体卡余额)' : (detail.payment > 0 ? '' : '(余额)') }}</view>
				<view class="value">￥{{ parseFloat(detail.payment) + parseFloat(detail.used_balance) }}</view>
			</view>
            <view class="item">
				<view class="label">订单编号</view>
				<view>
					<text class="value m-right10">{{ detail.order_code }}</text>
					<text class="size28 thmeColor" @click="$pop.setClip(detail.order_code)">复制</text>
				</view>
			</view>
            <view class="item" v-if="detail.add_time">
				<view class="label">下单时间</view>
				<view class="value">{{ $common.timeFormat(detail.add_time, 'Y-M-D h:m:s') }}</view>
			</view>
            <view class="item" v-if="detail.pay_time">
				<view class="label">支付时间</view>
				<view class="value">{{ $common.timeFormat(detail.pay_time, 'Y-M-D h:m:s') }}</view>
			</view>
        </view>
        <view class="text-center t-letter2 p-bot24" v-if="detail.state == 0">
            <view class="btn flexac size32 white" @click="payNow">立即支付</view>
            <view class="size30 color_87" @click="show_model(0)">取消预约</view>
        </view>

        <view class="float-nav" @click.stop="$common.Tel(detail.shopMobile)" v-if="detail.shopMobile">
			<view class="item bgwhite bor_radius flexac">
				<text class="iconfont icon-dianhua size42 thmeColor"></text>
			</view>
		</view>

        <showModel v-if="showModal" type="99" :title="title" :msg="msg" :btn1="btn1" :btn2="btn2" @certain="certain"
			@cancelFunc="showModal = false"></showModel>

        <u-popup :show="showPopup" :round="10" closeable @close="showPopup = false">
            <view class="botPop" v-if="detail.service_info">
                <view class="size44 bold m-bot20">{{ detail.service_info.title }}</view>
                <view class="size28 m-bot60">{{ detail.service_info.info }}</view>
                <image class="code m-bot60" :src="$imgUrls(detail.service_info.qrCode)" show-menu-by-longpress mode="aspectFit"></image>
                <view class="h6 color_99">长按识别二维码</view>
            </view>
        </u-popup>
    </view>
</template>

<script>
    import { mapState } from 'vuex'
    export default {
        data() {
            return {
                order_id: '',
                detail: '',
                codeInfo: '',
                showModal: false,
                modelType: '',
                title: '',
				msg: '',
				btn1: '',
				btn2: '',
                timer: null,
                showPopup: false
            }
        },
		computed: {
            ...mapState(['color'])
        },
        onLoad(e) {
            if(e.order_id) this.order_id = e.order_id
        },
        onShow() {
			this.getDetail()
		},
        methods: {
            getDetail() {
                this.$http.post({
                    url: '/zzj_singleSaleApi/orderSingleDetails',
                    data: {
                        order_id: this.order_id
                    }
                }).then(res => {
                    let result = res.data
                    if(res.errcode != 100 || !result) return
                    if(result.state > 0 && result.state < 6) this.getCode()
                    if(result.endTime > 0 && !this.timer) {
						this.timer = setInterval(this.getDetail, 2000)
					}
                    if(!result.endTime || result.endTime < 0) {
						if(result.state == 0) this.$back()
						this.clearTimer()
					}
                    this.detail = result
                })
            },
            getCode() {
				this.$http.post({
					url: '/zzj_singleSaleApi/get_qrcode',
					data: {
						order_id: this.order_id
					}
				}).then(res => {
					if(res.url) this.codeInfo = res
				})
			},
            openMap() {
				uni.openLocation({
					longitude: parseFloat(this.detail.shopPointx),
					latitude: parseFloat(this.detail.shopPointy),
					name: this.detail.shopName,
					address: this.detail.shopAdress
				})
			},
            payNow() {
				// #ifdef H5
				window.location.href = 'https://sra.mogoie.com/index.php/accountPay/weChatCashierPage?orderStr=' + this.detail.payID
				// #endif
				// #ifndef H5
				this.toUrl('/moneyPage/capital/checkstand?payid=' + this.detail.payID)
				// #endif	
			},
            async show_model(type) {
                this.modelType = type
                if (type == 0) {
					this.title = '是否确定取消订单？'
					this.msg = '可在已取消列表找到'
					this.btn1 = '我再想想'
					this.btn2 = '确定'
					this.showModal = true
				}
            },
            certain() {
                if (this.modelType == 0) { // 取消订单
					this.$http.post({
						url: '/zzj_singleSaleApi/cancelOrder',
						data: {
							order_id: this.order_id
						}
					}).then(res => {
						this.cancel(res)
					})
				}
            },
            cancel(res) {
				this.$Toast(res.msg)
				this.showModal = false
				this.getDetail()
			},
            clearTimer() {
				if(this.timer) {
					clearInterval(this.timer)
					this.timer = null
				}
			}
        },
        onHide() {
			this.clearTimer()
		},
		onUnload() {
			this.clearTimer()
		}
    }
</script>

<style lang="scss" scoped>
    .page {
		padding-bottom: calc(24rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
	}
    .card {
        width: 702rpx;
        background: #fff;
        border-radius: 20rpx;
        box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
        margin: 24rpx auto;
        .item {
            display: flex;
            padding: 12rpx 24rpx;
            .label {
                width: 180rpx;
                font-size: 28rpx;
                color: #888;
            }
            .value {
                flex: 1;
                font-size: 28rpx;
                color: #333;
            }
        }
        .avatar {
            width: 80rpx;
            height: 80rpx;
        }
        .add {
            width: 142rpx;
            height: 54rpx;
            background: var(--color);
            border-radius: 30rpx;
        }
    }
    .code_img {
        display: inline-block;
        width: 360rpx;
        height: 360rpx;
    }
    .overlay {
        background: rgba(255, 255, 255, 0.8);
        left: 0;
        top: 0;
    }
    .float-nav {
		position: fixed;
		right: 20rpx;
		bottom: calc(200rpx + constant(safe-area-inset-bottom));
        bottom: calc(200rpx + env(safe-area-inset-bottom));
		z-index: 1;
		.item {
			width: 80rpx;
			height: 80rpx;
			box-shadow: 0 4rpx 16rpx 0 rgba(0,0,0,.16);
		}
	}
    .btn {
        width: 676rpx;
        height: 80rpx;
        background: var(--color);
        border-radius: 40rpx;
        margin: 40rpx auto;
    }
    .botPop {
        padding: 60rpx 30rpx;
        text-align: center;
        .code {
            width: 384rpx;
            height: 384rpx;
        }
    }
</style>